import { Link, useLocation } from "react-router-dom";

function Navbar() {
    const location = useLocation();

    return (
        //定义导航连接
        <nav className="bg-blue-500 text-white p-4">
            <div className="container mx-auto flex justify-between items-center">
                <h1 className="text-2xl font-bold">My Website</h1>
                <ul className="hidden md:flex space-x-4">
                    {
                        ["Home", "About", "Contact", "Users"].map((item, index) => {
                            const path = item === 'Home' ? "/" : `/${item.toLowerCase()}`;;
                            const isActive = location.pathname === path;
                            console.log(location.pathname, path, isActive)

                            return (
                                <li key={index}>
                                    <Link to={path}
                                        className={`px-4 py-2 rounded ${isActive ? "bg-white text-blue-500" : "hover:bg-blue-700"
                                            }
                                    `}>
                                        {item}
                                    </Link>
                                </li>
                            )
                        })
                    }

                </ul>
            </div>
        </nav>
    )
}

export default Navbar;